{% extends "/shared/layout.html" %}
{% block mainContent %}
<div class="header">
  <input id="txtFriendId" type="hidden" value="{{friendInfo.user_id}}">
  <div class="wrapper">
    <ul>
      <li class="li_750">
        <div class="u_info">
          <a class="u_photo" href="###">
          <img src="{%- if(friendInfo.photo) -%} 
            {{friendInfo.photo}} 
            {%- else -%}
             ../static/images/photo.png 
             {%- endif -%}" alt=""/>
          </a>
          
          <div class="u_detail">
            <dl>
              <dd></dd>
              <dd>
                <em class="icon_name"></em><h1>{{friendInfo.user_name}}</h1>
              </dd>
              <dd id="userRegion">
                <em class="icon_location"></em>
              </dd>
              <dd>
                <em class="icon_birthday"></em>
                <label>{{pageRes.lblBirthday}}</label><span class="h1">{{friendInfo.birthday}}</span>
              </dd>
            </dl>
            
            <div class="operate_btn">
              {% if friendInfo.relationship == 1 %}
              <a id="btnDelFriend" href="###" class="button">{{pageRes.linkDelFriend}}</a>
              {% elif  friendInfo.relationship == 2%}
              <a id="btnAddFriend" href="###" class="button">{{pageRes.linkAddFriend}}</a>
              {% endif %}
            </div>
          </div>
        </div>
      </li>
      <li class="li_250">
         <div class="u_process">
            <h1>{{friendGoal.goal}}{{layoutRes.unitStep}}</h1>
          {{pageRes.dayGoalDesc}}<br />
          <div class="process">
            <div class="percent" style="width: {{friendGoal.progess}};">
              <img src="../static/images/ren.png" alt="" />
            </div>
          </div>
          {{pageRes.lblFinish}}{{friendGoal.progess}}<br/>
         </div>
      </li>
    </ul>
  </div>
</div>
<div class="wrapper">
  <div class="perf_item">
    <div class="item_list">
      <div class="item_content">
        <ul>
          <li>
            <dl>
              <dd class="item_box" stat-type="calorie">
                <div class="item4">
                  {{pageRes.lblCalorie|safe}}<br />
                  <span>{{friendKpi.calorie}}</span>{{friendKpi.calorieUnit}}
                </div>
              </dd>
              <dd class="item_bottom"></dd>
            </dl>
          </li>
          <li>
            <dl>
              <dd class="item_box" stat-type="run">
                <div class="item1">
                  {{pageRes.lblRun|safe}}<br />
                  <span>{{friendKpi.miles}}</span>{{layoutRes.unitKM}}
                </div>
              </dd>
              <dd class="item_bottom"></dd>
            </dl>
          </li>
          
          <li>
            <dl>
              <dd class="item_box" stat-type="sleep">
                <div class="item3">
                  {{pageRes.lblSleep|safe}}<br />
                  <span>{{friendKpi.sleeptime}}</span>{{layoutRes.unitHour}}
                </div>
              </dd>
              <dd class="item_bottom"></dd>
            </dl>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="../static/scripts/views/social/etlinking.views.friendDetail.js"></script>
<script type="text/javascript">
  $(function() {
    var location = "{{friendInfo.location}}",
        locationArray = location.split(','),
        provCode = locationArray[0],
        cityCode = locationArray[1];

    var region = nsbase.ui.utility.getRegion(provCode,cityCode);
    var loaction = region.provName + (region.cityName? " · " + region.cityName: "");
    $("#userRegion").append(loaction);
    nsbase.views.friendDetail.init();    
  });
</script>
{% endblock %}